<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>西瓜用户首页</title>
<link type="text/css" href="css/user_home_address.css" rel="stylesheet" />
<link type="text/css" href="css/common.css" rel="stylesheet" />
<link type="text/css" href="css/reset.css" rel="stylesheet" />
<link type="text/css" href="css/esc.css" rel="stylesheet" />
    <link type="text/css" href="theme-chalk/index.css" rel="stylesheet" />
<!--    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>&lt;!&ndash;必须得放在第一的位置&ndash;&gt;-->
    <script type="text/javascript" src="js/user_home_address.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/esc.js"></script>
    <script src="js/element-ui-index.js"></script>

</head>

<body>
<div id="app">
<div class="index">
  <myframe>
  <div class="user_content f_f width_1200_center">
    <div class="content_position">您当前的位置：<a href="javascript:">首页</a><span>&gt;</span><a href="javascript:">用户主页</a></div>
   <!-- <div class="user_content_top f_z15"><a href="#">注册会员</a><span>Register</span></div>-->
    <div class="hr_10"></div>
    <div class="user_content_con over_hidden width_1200_center"><!--over_hidden也是清除浮动的一种-->
      <div class="user_content_con_nav fl">
          <div class="nav_info">
              <h1>个人信息</h1>
              <ul>
                  <li><div class=""><a :href="'user_home.html?uid='+user.uid">个人资料</a></div></li>
                  <li><a :href="'user_home_info.html?uid='+user.uid">修改个人资料</a></li>
                  <li><div class="djbs"><a href="user_home_address.html">收货地址</a></div></li>
              </ul>
          </div>
          <div class="nav_goods">
              <h1>商品管理</h1>
              <ul>
                  <li><a href="user_home_order.html">我的订单</a></li>
                  <li><a href="user_home_favorite.html">我的收藏</a></li>
                  <li><a href="user_home_cart.html">我的购物车</a></li>
                  <li><a href="#">卖车中心</a></li>
              </ul>
          </div>
          <div class="nav_comments_opinion">
              <h1>评论意见</h1>
              <ul>
                  <li><a href="user_home_comment.html">我的评论</a></li>
                  <li><a href="user_home_idea.html">我的意见</a></li>
                  <li><a href="user_home_message.html">西瓜消息</a></li>
              </ul>
          </div>
      </div>
      <!--右侧收货地址-->
      <div class="user_content_con_c fr">
        <div class="content_goods_address f_f width_1000_center">
          <div class="content_goods_address_top over_hidden width_1000_center">
            <div class="top_address fl"><h1>收货地址</h1></div>
            <div class="top_all fr"><span class="span1">西瓜店-全部地址</span><span class="span2">{{usershdz.length}}</span></div>
          </div>
          <div class="content_goods_address_con width_1000_center clearfix">
            <div class="content_goods_address_con_top">
              <div class="con_check fl"><input class="check_all" type="checkbox" id="con_check1"/><span><label for="con_check1">全选</label></span></div>
              <div class="con_name fl"><h1>收货人</h1></div>
              <div class="con_address1 fl"><h1>所在地区</h1></div>
              <div class="con_address2 fl"><h1>详细地址</h1></div>
              <div class="con_num fl"><h1>邮编</h1></div>
              <div class="con_action fr"><h1>操作</h1></div>
              <div class="con_phone fr"><h1>电话/手机</h1></div>
            </div>
            <div class="hr_5"></div>
            <div class="content_goods_message_con_check"><input class="check_revsern" name="check_revsern" type="checkbox" id="con_check2"/><span><label for="con_check2">反选</label></span><a href="javascript:void(0)">批量删除</a></div>

            <div v-if="dzStatus" v-for="u,index in usershdz">
              <div class="content_goods_address_con_con ">
                    <div class="con_check1 fl"><input type="checkbox" v-model="shdzSid" value="u.sid"  class="check_one"/></div>
                    <div class="con_name1 fl">{{u.username}}</div>
                    <div class="con_address11 fl">{{u.addr}}</div>
                    <div class="con_address11 fl">{{u.xiangxiaddr}}</div>
                    <div class="con_num1 fl">{{u.youbian}}</div>
                  <div class="con_phone1 fl">{{u.phone}}</div>
                        <div class="con_action1 fr">
                          <div class="con_action2">
                            <p>
                                <a @click="update(index)" href="javascript:void(0)">修改</a>
                                <em>|</em>
                                <a @click.prevent="op(index)" href="javascript:void(0)">删除</a>
                            </p>
                              <p>
                                  <a v-if="u.isDefault != 1" @click="sheweiDefault(index)" href="javascript:void(0)">设置为默认地址</a>
                              </p>
                          </div>

                       </div>
                </div>
              </div>

              <div v-if="!dzStatus" class="new_content over_hidden width_1000_center ">
                  <h1>修改收货地址</h1>
                  <div class="content_con">
                      <div class="con_name fl"><span class="sign">*</span>收件人姓名：</div>
                      <div class="con_con con_txt fl"><input class="name_" type="text" :value="usershdz.username" autocomplete="off" size="25"><span class="name_ms text_te"></span></div>
                  </div>
                  <div class="content_con">
                      <div class="con_name fl"><span class="sign">*</span>所在地区：</div>
                      <div class="con_con con_txt fl">
                          <select v-model="shen" name="_fm.b._0.p">
                              <option value="">请选择</option>
                              <option value="110000">北京</option>
                              <option value="120000">天津</option>
                              <option value="130000">河北省</option>
                              <option value="140000">山西省</option>
                              <option value="150000">内蒙古自治区</option>
                              <option value="210000">辽宁省</option>
                              <option value="220000">吉林省</option>
                              <option value="230000">黑龙江省</option>
                              <option value="310000">上海</option>
                              <option value="320000">江苏省</option>
                              <option value="330000">浙江省</option>
                              <option value="340000">安徽省</option>
                              <option value="350000">福建省</option>
                              <option value="360000">江西省</option>
                              <option value="370000">山东省</option>
                              <option value="410000">河南省</option>
                              <option value="420000">湖北省</option>
                              <option value="430000">湖南省</option>
                              <option value="440000">广东省</option>
                              <option value="450000" selected="selected">广西壮族自治区</option>
                              <option value="460000">海南省</option>
                              <option value="500000">重庆</option>
                              <option value="510000">四川省</option>
                              <option value="520000">贵州省</option>
                              <option value="530000">云南省</option>
                              <option value="540000">西藏自治区</option
                              ><option value="610000">陕西省</option>
                              <option value="620000">甘肃省</option>
                              <option value="630000">青海省</option>
                              <option value="640000">宁夏回族自治区</option>
                              <option value="650000">新疆维吾尔自治区</option>
                              <option value="710000">台湾省</option>
                              <option value="810000">香港特别行政区</option>
                              <option value="820000">澳门特别行政区</option>
                              <option value="990000">海外</option>
                          </select>
                          <select v-model="shi" name="_fm.b._0.c" class="select1">
                              <option value="">请选择</option>
                              <option value="450100" selected="selected">南宁市</option>
                              <option value="450200">柳州市</option>
                              <option value="450300">桂林市</option>
                              <option value="450400">梧州市</option>
                              <option value="450500">北海市</option>
                              <option value="450600">防城港市</option>
                              <option value="450700">钦州市</option>
                              <option value="450800">贵港市</option>
                              <option value="450900">玉林市</option>
                              <option value="451000">百色市</option>
                              <option value="451100">贺州市</option>
                              <option value="451200">河池市</option>
                              <option value="451300">来宾市</option>
                              <option value="451400">崇左市</option>
                          </select><select v-model="xian" name="_fm.b._0.a" class="select1">
                          <option value="">请选择</option>
                          <option value="450102">兴宁区</option>
                          <option value="450103">青秀区</option>
                          <option value="450105">江南区</option>
                          <option value="450107">西乡塘区</option>
                          <option value="450108">良庆区</option>
                          <option value="450109">邕宁区</option>
                          <option value="450122">武鸣县</option>
                          <option value="450123">隆安县</option>
                          <option value="450124">马山县</option>
                          <option value="450125">上林县</option>
                          <option value="450126" selected="selected">宾阳县</option>
                          <option value="450127">横县</option>
                          <option value="450128">其它区</option>
                      </select>
                      </div>
                  </div>
                  <div class="content_con">
                      <div class="con_name fl"><span class="sign">*</span>详细地址：</div>
                      <div class="con_con con_txt fl"><input v-model="usershdz.xiangxiaddr" class="address_" type="text" value="和吉镇下赤村49号" autocomplete="off" size="25"><span class="address_ms text_te"></span></div>
                  </div>
                  <div class="content_con">
                      <div class="con_name fl"><span class="sign">*</span>邮政编号：</div>
                      <div class="con_con con_txt fl"><input v-model="usershdz.youbian" class="post_code_" type="text" value="530412" autocomplete="off" size="25"><span class="post_code_ms text_te"></span></div>
                  </div>
                  <div class="content_con">
                      <div class="con_name fl"><span class="sign">*</span>手机：</div>
                      <div class="con_con con_txt fl"><input v-model="usershdz.phone" class="mobile_" type="text" value="18877829596" autocomplete="off"  size="25"><span class="mobile_ms text_te"></span></div>
                  </div>

<!--                  <div class="content_con">-->
<!--                      <div class="con_name fl"><span class="sign">*</span>设置为默认：</div>-->
<!--                      <div class="con_con fl">-->
<!--                          &lt;!&ndash;                    <input type="radio" name="default" id="m1" value="0" checked="checked"/>&ndash;&gt;-->
<!--                          <label>是</label><input v-model="insertshdz.isDefault" type="radio" value="1">-->
<!--                          <label>否</label><input v-model="insertshdz.isDefault" type="radio" value="0">-->
<!--                      </div>-->
<!--                  </div>-->
                  <div class="content_button"><a @click.prevent="op2" href="javascript:void(0)">修 改</a></div>
              </div>





          </div>

          <div class="content_goods_address_new width_1000_center">
          	<h1>新增收货地址</h1>
          	<div class="new_content over_hidden width_1000_center ">
              <div class="content_con">
                <div class="con_name fl"><span class="sign">*</span>收件人姓名：</div>
                <div class="con_con con_txt fl"><input v-model="insertshdz.username" class="name_" type="text" value="" autocomplete="off" size="25"><span class="name_ms text_te"></span></div>
              </div>
                <div class="content_con">
                    <div class="con_name fl"><span class="sign">*</span>所在地区：</div>
                    <div class="con_con con_txt fl">
                        <select v-model="shen" name="_fm.b._0.p">
                            <option value="">请选择</option>
                            <option value="北京">北京</option>
                            <option value="天津">天津</option>
                            <option value="河北省">河北省</option>
                            <option value="山西省">山西省</option>
                            <option value="内蒙古自治区">内蒙古自治区</option>
                            <option value="辽宁省">辽宁省</option>
                            <option value="吉林省">吉林省</option>
                            <option value="黑龙江省">黑龙江省</option>
                            <option value="上海">上海</option>
                            <option value="江苏省">江苏省</option>
                            <option value="浙江省">浙江省</option>
                            <option value="安徽省">安徽省</option>
                            <option value="福建省">福建省</option>
                            <option value="江西省">江西省</option>
                            <option value="山东省">山东省</option>
                            <option value="河南省">河南省</option>
                            <option value="420000">湖北省</option>
                            <option value="430000">湖南省</option>
                            <option value="440000">广东省</option>
                            <option value="450000" selected="selected">广西壮族自治区</option>
                            <option value="460000">海南省</option>
                            <option value="500000">重庆</option>
                            <option value="510000">四川省</option>
                            <option value="520000">贵州省</option>
                            <option value="530000">云南省</option>
                            <option value="540000">西藏自治区</option
                            ><option value="610000">陕西省</option>
                            <option value="620000">甘肃省</option>
                            <option value="630000">青海省</option>
                            <option value="640000">宁夏回族自治区</option>
                            <option value="650000">新疆维吾尔自治区</option>
                            <option value="710000">台湾省</option>
                            <option value="810000">香港特别行政区</option>
                            <option value="820000">澳门特别行政区</option>
                            <option value="990000">海外</option>
                        </select>
                        <select v-model="shi" name="_fm.b._0.c" class="select1">
                            <option value="">请选择</option>
                            <option value="南宁市" selected="selected">南宁市</option>
                            <option value="柳州市">柳州市</option>
                            <option value="桂林市">桂林市</option>
                            <option value="梧州市">梧州市</option>
                            <option value="北海市">北海市</option>
                            <option value="防城港市">防城港市</option>
                            <option value="钦州市">钦州市</option>
                            <option value="贵港市">贵港市</option>
                            <option value="玉林市">玉林市</option>
                            <option value="百色市">百色市</option>
                            <option value="贺州市">贺州市</option>
                            <option value="河池市">河池市</option>
                            <option value="来宾市">来宾市</option>
                            <option value="崇左市">崇左市</option>
                        </select><select v-model="xian" name="_fm.b._0.a" class="select1">
                        <option value="">请选择</option>
                        <option value="兴宁区">兴宁区</option>
                        <option value="青秀区">青秀区</option>
                        <option value="江南区">江南区</option>
                        <option value="西乡塘区">西乡塘区</option>
                        <option value="良庆区">良庆区</option>
                        <option value="邕宁区">邕宁区</option>
                        <option value="武鸣县">武鸣县</option>
                        <option value="隆安县">隆安县</option>
                        <option value="马山县">马山县</option>
                        <option value="上林县">上林县</option>
                        <option value="宾阳县" selected="selected">宾阳县</option>
                        <option value="横县">横县</option>
                        <option value="其它区">其它区</option>
                    </select>
                    </div>
                </div>
              <div class="content_con">
                <div class="con_name fl"><span class="sign">*</span>详细地址：</div>
                <div class="con_con con_txt fl"><input v-model="insertshdz.xiangxiaddr" class="address_" type="text" value="" autocomplete="off" size="25"><span class="address_ms text_te"></span></div>
              </div>
              <div class="content_con">
                <div class="con_name fl"><span class="sign">*</span>邮政编号：</div>
                <div class="con_con con_txt fl"><input v-model="insertshdz.youbian" class="post_code_" type="text" value="" autocomplete="off" size="25"><span class="post_code_ms text_te"></span></div>
              </div>
              <div class="content_con">
                <div class="con_name fl"><span class="sign">*</span>手机：</div>
                <div class="con_con con_txt fl"><input v-model="insertshdz.phone" class="mobile_" type="text" value="" autocomplete="off"  size="25"><span class="mobile_ms text_te"></span></div>
              </div>
              <div class="content_con">
                <div class="con_name fl"><span class="sign">*</span>设置为默认：</div>
                <div class="con_con fl">
<!--                    <input type="radio" name="default" id="m1" value="0" checked="checked"/>-->
                    <label>是</label><input v-model="insertshdz.isDefault" type="radio" value="1">
                    <label>否</label><input v-model="insertshdz.isDefault" type="radio" value="0">
                </div>
              </div>
              <div class="content_button"><a @click.prevent="op1" href="javascript:void(0)">保&nbsp;存</a></div>
            </div>
          </div>

        </div>
      </div><!--右侧购物车完-->
    </div><!--左右侧完-->
  </div><!--整个内容部分-->






  <div class="hr_8"></div>
  </myframe>
</div>

</div>

<script>
    var v = new Vue({
        el : "#app",
        data : {
            user : [],
            usershdz : [],
            shdzSid : [],
            dzStatus : true,
            dedaultStatus : true,
            insertshdz : {

            },
            shen : "",
            shi : "",
            xian : ""
        },
        created(){
            this.getLoginedUser();
        },
        methods:{
            //获取用户信息
            getLoginedUser() {
                axios.get("/esc-user/getLoginedUser").then(res => {
                    if (res.data.code) {
                        this.user = res.data.data;
                        this.selectshdzById();
                    }
                })
            },
            // 渲染收货地址列表
            selectshdzById() {
                var p = new URLSearchParams();
                p.append("uid", this.user.uid);
                axios.get("/esc-order/shdz/selectshdzById?"+p).then(res=>{
                    this.usershdz = res.data.data;
                    console.log(this.usershdz);
                })
            },
            // 弹出修改框
            update(index) {
                this.usershdz =this.usershdz[index];
                // this.usershdz = this.shen + this.shi + this.xian;
                this.dzStatus = false;
                console.log(this.usershdz);
            },
            //修改
            updateshdzBySid() {
                axios.post("/esc-order/shdz/updateshdzBySid", this.usershdz).then(res=>{

                    this.selectshdzById();
                })
                this.dzStatus = true;

            },
            // 删除收货地址
            deleteshdz(index) {
                    var p = new URLSearchParams();
                    p.append("sid", this.usershdz[index].sid);
                    axios.get("/esc-order/shdz/deleteshdz?"+p).then(res=>{

                        this.selectshdzById();
                    })
            },
            // 设为默认地址
            sheweiDefault(index) {
                var p = new URLSearchParams();
                p.append("sid", this.usershdz[index].sid);
                axios.get("/esc-order/shdz/sheweiDefault?"+p).then(res=>{
                    alert(res.data.msg);
                    this.selectshdzById();
                })
                this.dedaultStatus = false;

            },
            // 添加收货地址
            insertshdz1() {
                this.insertshdz.uid = this.user.uid;
                this.insertshdz.addr = this.shen + this.shi + this.xian;
                axios.post("/esc-order/shdz/insertshdz1", this.insertshdz).then(res=>{
                    console.log(this.insertshdz);
                    this.selectshdzById();
                    if(this.insertshdz.isDefault == 1) {
                        this.sheweiDefault(this.usershdz.length-1);
                    }

                })
            },
            op(index) {
                this.$confirm('是否要将该地址从列表中删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.deleteshdz(index)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            op1() {
                this.$confirm('是否要添加该地址, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.insertshdz1()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加'
                    });
                });
            },
            op2() {
                this.$confirm('是否要修改您的地址, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.updateshdzBySid()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });
            },
        }
    })
</script>
</body>
</html>